@import "../../../style/sass/common/variables.scss";
@import "../../../style/sass/common/function.scss";

.bg-color-employee {
    background-color: $employee-btn-bgcolor;
}

.employee-head-image{
    width:$employee-image-width;
    height:$employee-image-width;
    border-radius: 50%;
}

.bg-color-employee:hover {
    background-color:$employee-btn-hovercolor;
}
.employee-login{
    padding: 1.5rem;
    text-align: center;
}

.employee-store-img{
    width: 40px;
}

.toggle-button{
    min-width: 0 !important;
    padding: 0 !important;
}

.list-container{
    position: relative;
}

.user-list{
    background-color: $color-white;
    position: absolute;
    z-index: 2;
    max-height: pxtorem(85);
    overflow: auto;
}
.toggle-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 0;
}
.content-btn{
    z-index: 2;
}

.employee-icon{
    height: pxtorem(40);
    width: pxtorem(40);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

@keyframes rotate-arrow
{
    0% {transform: rotate(0);}
    25% {transform: rotate(-45deg);}
    50% {transform: rotate(-90deg);}
    75% {transform: rotate(-135deg);}
    100% {transform: rotate(-180deg);}
}
.rotate-arrow{
    animation: rotate-arrow 100ms forwards;
}